<script setup lang="ts">
import type { WorkbenchProductsItem } from '../typing';
import type { MinishopSpu } from '../../../uctoo/minishop_spu/types.ts';
import { formatPrice } from '#/utils/common';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  VbenIcon,
} from '@vben-core/shadcn-ui';
import { useRouter } from 'vue-router';
const router = useRouter();
interface Props {
  items: MinishopSpu[];
  title: string;
}

defineOptions({
  name: 'WorkbenchProducts',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});

function openTabWithParams(id: string) {
  // 这里就是路由跳转，也可以用path
  const params = { id: id };
  router.push({ name: 'minishop.minishop_spu.detail', state: { params } });
}
</script>

<template>
  <Card>
    <CardHeader class="py-4">
      <CardTitle class="text-lg">{{ title }}</CardTitle>
    </CardHeader>
    <CardContent class="flex flex-wrap p-5 pt-0">
      <a-row :gutter="[24, 24]">
      <a-col v-for="(item, index) in items" :key="item.id" :span="12" >
        <div class="product-card" @click="openTabWithParams(item.id)">
          <img :src="JSON.parse(item.headimg)[0]" alt="Product Image" class="product-image" />
          <div class="product-info">
            <h3>{{ item.title }}</h3>
            <p>{{ item.subtitle }}</p>
            <p>¥{{ formatPrice(item.min_price) }}元</p>
            <a-button type="primary">购买</a-button>
          </div>
        </div>
      </a-col>
    </a-row>
    </CardContent>
  </Card>
</template>
